<template>
	<view class="chat">
		<view class="bg" :style="{backgroundImage:'url('+nowBackground+')'}"></view>
		<view style="position: absolute;bottom: 50px;">
			<view class="chat-content">
				<view id="chatContent" style="height: 90%;overflow-y: auto;">
					<view class="log" v-for="item in logList">
						<view v-if="item.userId==='-1'" style="display: flex;align-items: center;">
							<image class="avatar" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-42f61864-8c3b-41c7-a6eb-875b941dfe63/e831d72b-53d2-46f4-a197-7e13ae32ba51.jpg" @click="XXClick"></image>
							<view class="other">
								{{item.content}}
							</view>
						</view>
						<view v-else style="display: flex;justify-content: flex-end;">
							<view class="oneself">
								{{item.content}}
							</view>
							<open-data class="avatar" type="userAvatarUrl" default-avatar="https://dev.stall.lkxlkf.com/ca/icons/default/default-icon.png"></open-data>
						</view>
					</view>
				</view>
				<view class="input-box">
					<u-input placeholder=" " border="surround" v-model="content" shape="circle" color="#fff"></u-input>
					<view style="margin: 0 20rpx;">
						<u-icon name="twitter" color="#f7a81f" size="30" @click="send"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				/* 当前背景 */
				nowBackground: this.$utils.getUserBackground(),
				content: '',
				logList: [{
					content: '小程序还在建设中~~~',
					userId: '-1'
				}],
				xxTime:0
			}
		},
		methods: {
			XXClick(){
				this.xxTime+=1;
				if(this.xxTime===2){
					this.xxTime=0;
					this.$utils.run('../chat/icpBig');
				}
			},
			nowBackgroundChange() {
				this.nowBackground = this.$utils.getUserBackground()
			},
			send() {
				if (this.content === '') return;
				this.logList.push({
					content: this.content,
					userId: '1'
				})
				this.content = '';


				let chatContent = uni.createSelectorQuery().in(this).select('#chatContent'); //这样写就只会选择本页面组件的类名box的
				chatContent.scrollOffset(data => { //回调函数，data中存储的是这些元素节点（每个节点的信息存为一个对象）的位置信息
					console.log(data);
					console.log("得到布局位置信息" + JSON.stringify(data));
				}).exec();

				// let chatContent=document.getElementById('chatContent');
				// // chatContent
				// chatContent.scrollTop = chatContent.scrollHeight;
			}
		}
	}
</script>

<style lang="less">
	.chat {
		height: 100%;
		width: 100vw;
		background-color: #3b3b3b;

		.bg {
			height: 100%;
			width: 100%;
			position: fixed;
			background-size: 100%;
			filter: blur(10px);
		}

		.chat-content {
			height: 80vh;
			width: 100vw;
			// background-color: #484a4d;
			// opacity: 0.5;
			// background: rgba(113, 113, 113, 0.5);

			.log {
				color: rgba(255, 255, 255, 1.0);
				padding: 0rpx 30rpx;
				padding-top: 30rpx;

				.other {
					display: inline-block;
					padding: 20rpx 30rpx;
					background-color: #6e7175;
					// background: rgba(130, 130, 130, 0.5);
					border-radius: 5pt;
					margin-left: 10rpx;
				}

				.oneself {
					display: inline-block;
					padding: 20rpx 30rpx;
					background-color: #bd8016;
					border-radius: 5pt;
					margin-right: 10rpx;
				}

				.avatar {
					height: 88rpx;
					width: 88rpx;
					min-width: 88rpx;
					background-size: 100%;
					border: 1rpx solid #FFFFFF;
					border-radius: 50%;
					overflow: hidden;
				}
			}

			.input-box {
				height: 10%;
				width: 100%;
				display: flex;
				align-items: center;
				// background-color: #94989e;
				background: rgba(130, 130, 130, 0.5);

				.u-input {
					padding: 5px 9px 5px 18px !important;
					border: 1px #FFFFFF solid;
				}
			}
		}
	}
</style>
